<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改工资条信息')" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-info-edit" th:object="${wageSlipInfo}">
        <input name="wageSlipId" th:field="*{wageSlipId}" type="hidden">
        <div class="col-sm-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">员工：</label>
                <div class="col-sm-8">
                    <select id="employeeId" name="employeeId" class="form-control" required>
                        <option th:each="employee:${employees}" th:value="${employee.employeeId}" th:text="${employee.name}" th:selected="${employee.employeeId == wageSlipInfo.employeeId}"></option>
                    </select>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">月份：</label>
                <div class="col-sm-8">
                    <input name="month" th:value="${#dates.format(wageSlipInfo.month, 'yyyy-MM-dd')}" class="form-control time-input" id="month" type="text" placeholder="yyyy-MM-dd" required>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">总工资：</label>
                <div class="col-sm-8">
                    <input name="grossSalary" th:field="*{grossSalary}" id="grossSalary" class="form-control" type="number" required onchange="calculateNetSalary()">
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">扣除项：</label>
                <div class="col-sm-8">
                    <input name="deductions" th:field="*{deductions}" id="deductions" class="form-control" type="number" required onchange="calculateNetSalary()">
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">社保：</label>
                <div class="col-sm-8">
                    <input name="siDeduction" th:field="*{siDeduction}" id="siDeduction" class="form-control" type="number" required onchange="calculateNetSalary()">
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">公积金：</label>
                <div class="col-sm-8">
                    <input name="hfDeduction" th:field="*{hfDeduction}" id="hfDeduction" class="form-control" type="number" required onchange="calculateNetSalary()">
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">个人所得税：</label>
                <div class="col-sm-8">
                    <input name="iitDeduction" th:field="*{iitDeduction}" id="iitDeduction" class="form-control" type="number" required onchange="calculateNetSalary()">
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">实发工资：</label>
                <div class="col-sm-8">
                    <input name="netSalary" th:field="*{netSalary}" id="netSalary" class="form-control" type="number" readonly>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var prefix = ctx + "system/info";

    $("#form-info-edit").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/edit", $('#form-info-edit').serialize());
        }
    }

    // 初始化日期选择器
    $("input[name='month']").datetimepicker({
        format: "yyyy-MM",
        minView: "month",
        autoclose: true
    });

    function calculateNetSalary() {
        var grossSalary = parseFloat($("#grossSalary").val()) || 0;
        var deductions = parseFloat($("#deductions").val()) || 0;
        var siDeduction = parseFloat($("#siDeduction").val()) || 0;
        var hfDeduction = parseFloat($("#hfDeduction").val()) || 0;
        var iitDeduction = parseFloat($("#iitDeduction").val()) || 0;

        var netSalary = grossSalary - deductions - siDeduction - hfDeduction - iitDeduction;
        $("#netSalary").val(netSalary);
    }

    // 初始页面时计算一次
    $(document).ready(function() {
        calculateNetSalary();
    });

    // 当其他输入框失去焦点时重新计算实发工资
    $("#grossSalary, #deductions, #siDeduction, #hfDeduction, #iitDeduction").blur(calculateNetSalary);
</script>
</body>
</html>